<!--
 * @Author: boyyang
 * @Date: 2022-02-19 16:07:31
 * @LastEditTime: 2022-02-20 15:36:57
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\music\index.vue
-->

<template>
    <background>
        <carousel v-model:urls="banners"></carousel>
        <music-list></music-list>
        <div class="menu-btn">
            <menu-change :buttons="buttons" @btn-click="btnClick"></menu-change>
        </div>
    </background>
</template>

<script lang="ts" setup>
import { getMusicCarousel, getMusicTopList } from '@/api/music'
import MusicList from './components/musicList.vue'
const router = useRouter()

const banners = ref<string[]>([
    'https://626f-boyyang-8gv2s8f21447c0c6-1302829433.tcb.qcloud.la/2189677616@qq.com/wallpaper_pc/%E3%80%8A%E9%9B%86%E5%8E%9F%E7%BE%8E%E3%80%8B%E5%92%8C%E6%9C%8D%20%C9%A1%20%E4%B8%AD%E5%9B%BD%E9%A3%8E%20%E7%BE%8E%E5%B0%91%E5%A5%B3%20%E6%8B%BC%E5%9B%BE4k%E5%A3%81%E7%BA%B8_%E5%BD%BC%E5%B2%B8%E5%9B%BE%E7%BD%91.jpg',
    'https://626f-boyyang-8gv2s8f21447c0c6-1302829433.tcb.qcloud.la/1761617270@qq.com/wallpaper_pc/%E5%A5%B3%E5%AD%A9%E5%AD%90%20%E6%B4%BE%E8%92%99%20%E5%8E%9F%E7%A5%9E4k%E5%8A%A8%E6%BC%AB%E5%A3%81%E7%BA%B8_%E5%BD%BC%E5%B2%B8%E5%9B%BE%E7%BD%91.jpg',
    'https://626f-boyyang-8gv2s8f21447c0c6-1302829433.tcb.qcloud.la/1761617270@qq.com/wallpaper_pc/%E6%98%8E%E6%97%A5%E6%96%B9%E8%88%9F%E6%96%AF%E5%8D%A1%E8%92%82%20%E8%83%8C%E4%B8%AD%E9%9C%B2%E8%83%8C%20%E5%9B%9E%E7%9C%B8%20%E5%94%AF%E7%BE%8E%E5%A5%BD%E7%9C%8B4k%E5%8A%A8%E6%BC%AB%E5%A3%81%E7%BA%B8_%E5%BD%BC%E5%B2%B8%E5%9B%BE%E7%BD%91.jpg'
])


getMusicCarousel().then((res: any) => {
    banners.value = res.banners.map((item: any) => {
        return item.imageUrl
    })
})

getMusicTopList().then((res) => {
    console.log(res)
})
const buttons = [
    {
        icon: "icon-custom311"
    }
]

const btnClick = (e: number) => {
    switch (e) {
        case 0:
            router.back()
            break
        default:
            return
    }
}

</script>

<style scoped lang="scss">
.menu-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>